<template>
  <div id="J_priceList">
    <div class="J_priceList2">
      <div class="price-panle g-mt8">
          <h4 class="price-title-panle">
              <div class="sort-row J_priceSortBtn">                                          
                  <span>综合排序&nbsp;<span class="icon-xiajiantou" style="font-size:8px;color:#999999;"></span></span>
              </div>
              全部报价
          </h4>
          <dl class="price-list-panle new-list">
              <dt>
                  <ul>
                    <li class="i-sale" >序号</li>
                    <li class="i-area">区域</li>
                    <li class="i-price">
                      <span class="J_tip" >裸车价
                         <span  class="icon-wenhao" style="font-size:0.8rem;color:#ccc;top:2px;left:-2px;" @tap="netPricePopover"></span>      
                          <div id="netPriceShow" v-show="netPriceShow" >
                            <b>净车价</b>
                            是指仅购买车辆本身所花费的费用，不包含车辆购置税、车船税、交强险、商业险、上牌费及其他附加费用的价格。
                          </div>
                      </span>
                    </li>
                    <li>
                      <span class="J_tip" >全包售价
                        <span class="icon-wenhao" style="font-size:0.8rem;color:#ccc;top:2px;left:2px;" @tap="fullPricePopover"></span>
                        <div id="totalPriceShow" v-show="totalPriceShow">
                          <b>全包售价</b>
                          是指购买车辆所花费的所有费用，包含了净车价、购置税、车船税、交强险、商业险、上牌费、精品套装的价格。一般到您提车时不再有其他费用。
                        </div>
                      </span>
                    </li>
                  </ul>
              </dt>
              <dd v-for="(v,i) in prices">
                  <a class="l-detail" href="javascript:;">
                      <ul>
                          <li class="i-sale face-box vip">
                              {{i + 1}}
                          </li>
                          <li class="i-area">{{v.cityName}}</li>
                          <li class="i-price"><div>{{(v.netPrice/10000).toFixed(2)}}万<!-- <div class="dis"><span class="icon-downarrow" style="font-size:0.5rem;">1万</span></div> --></div></li>
                          <li class="i-qprice"><div>{{(v.allPrice/10000).toFixed(2)}}万<!-- <div class="detail-text">详情</div> --></div></li>
                      </ul>
                  </a>
              </dd>
              <dd v-if="prices.length==0">
                    <div style="text-align:center;padding:3px 0px 3px 0px;">正在询价，请耐心等待</div>
              </dd>    
          </dl>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      netPriceShow:false,
      totalPriceShow:false
    };
  },
  methods:{
    fullPricePopover() {
      this.totalPriceShow = !this.totalPriceShow
      this.netPriceShow  = false
    },
    netPricePopover() {
      this.netPriceShow = !this.netPriceShow
      this.totalPriceShow = false
    }
  },
  //获取父组件传过来的数据
  props:['prices']
};
</script>
<style scoped>
.price-panle {
  background-color: #fff;
  position: relative;
  font-size: 0.6rem;
}

.price-panle .price-title-panle {
  font-size: 0.8rem;
  font-weight: 400;
  padding: 0.5rem 0 0.5rem 0.5rem;
  color: #1a1a1a;
}

.price-panle .price-title-panle .sort-row {
  float: right;
  position: relative;
  margin-right: 0.8rem;
  font-size: 0.7rem;
  z-index: 3;
  cursor: pointer;
}

.price-panle .price-title-panle .sort-row span {
  position: relative;
  color: #2b2b2b;
}

.price-panle .price-list-panle.new-list dd a.r-tel:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -0.45rem;
  height: 0.9rem;
  background-size: 0.9rem 0.9rem;
  border-left: 1px solid #f2f2f2;
}

.price-panle .price-title-panle .sort-row ul {
  position: absolute;
  left: 50%;
  top: 1.3rem;
  margin-left: -4rem;
  width: 6.15rem;
  border-radius: 0.1rem;
  background-color: #fff;
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.2);
  display: none;
}

.price-panle .price-title-panle .sort-row li {
  position: relative;
}

.price-panle .price-title-panle .sort-row li:before {
  bottom: 0;
  content: "";
  background-color: #e5e5e5;
  height: 1px;
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.price-panle .price-title-panle .sort-row li a {
  display: block;
  line-height: 1.8rem;
  padding-left: 0.45rem;
}

.price-panle .price-title-panle .sort-row li a.selected {
  position: relative;
  color: #dc181c;
}

.price-panle .price-title-panle .sort-row.sort-hover span {
  color: #dc181c;
}

.price-panle .price-title-panle .sort-row.sort-hover span:after {
  border-top-color: #dc181c;
}

.price-panle .price-title-panle .sort-row.sort-hover ul {
  display: block;
}
.price-panle .price-list-panle.old-list li.i-sale {
  width: 23%;
}

.price-panle .price-list-panle.old-list li.i-area {
  width: 21%;
}

.price-panle .price-list-panle.old-list li.i-price {
  width: 25%;
}

.price-panle .price-list-panle.new-list ul {
  width: 100%;
  display: table;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.price-panle .price-list-panle.new-list li {
  display: table-cell;
  padding: 0.3rem 0;
  vertical-align: middle;
  text-align: center;
}

.price-panle .price-list-panle.new-list li.i-sale {
  width: 23%;
}

.price-panle .price-list-panle.new-list li.i-area {
  width: 21%;
}

.price-panle .price-list-panle.new-list li.i-price {
  width: 25%;
}

.price-panle .price-list-panle.new-list dt {
  position: relative;
  background-color: #f5f5f5;
  color: #8b8b8b;
  font-size: 0.5rem;
}

.price-panle .price-list-panle.new-list dt:before {
  content: "";
  background-color: #e5e5e5;
  height: 1px;
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  top: 0;
}

.price-panle .price-list-panle.new-list dt li span {
  position: relative;
  cursor: pointer;
  z-index: 1;
}

.price-panle .price-list-panle.new-list dt li .J_tipBox {
  display: inline-block;
}

.price-panle .price-list-panle.new-list dt li .mod-shade {
  background: rgba(0, 0, 0, 0);
}

.price-panle .price-list-panle.new-list dt li .tip-box {
  font-size: 0.6rem;
  position: absolute;
  left: 50%;
  top: 1.3rem;
  margin-left: -5.2rem;
  width: 10rem;
  padding: 0.5rem;
  text-align: left;
  color: #3d3d3d;
  border-radius: 0.1rem;
  background-color: #fff;
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1);
  z-index: 10;
  display: none;
}

.price-panle .price-list-panle.new-list dt li .tip-box:before {
  content: "";
  position: absolute;
  right: 50%;
  top: -0.3rem;
  margin-left: -0.15rem;
  font-size: 0;
  line-height: 0;
  border-width: 0.3rem;
  border-color: rgba(0, 0, 0, 0.02);
  border-top-width: 0;
  border-style: dashed;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-right-color: transparent;
}

.price-panle .price-list-panle.new-list dt li .tip-box:after {
  content: "";
  position: absolute;
  right: 50%;
  top: -0.2rem;
  margin-left: -0.15rem;
  font-size: 0;
  line-height: 0;
  border-width: 0.3rem;
  border-color: #fff;
  border-top-width: 0;
  border-style: dashed;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-right-color: transparent;
}

.price-panle .price-list-panle.new-list dt li .tip-box.arr-right {
  margin-left: -7.2rem;
}

.price-panle .price-list-panle.new-list dt li .tip-box.arr-right:after,
.price-panle .price-list-panle.new-list dt li .tip-box.arr-right:before {
  right: 32%;
}

.price-panle .price-list-panle.new-list dd {
  position: relative;
  display: table;
  width: 100%;
}

.price-panle .price-list-panle.new-list dd:before {
  bottom: 0;
  content: "";
  background-color: #f2f2f2;
  height: 1px;
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.price-panle .price-list-panle.new-list dd a {
  display: table-cell;
}

.price-panle .price-list-panle.new-list dd a.l-detail li.i-price em {
  display: block;
}

.price-panle .price-list-panle.new-list dd a.l-detail li.i-price .dis {
  font-size: 0.5rem;
}

.price-panle .price-list-panle.new-list dd a.l-detail li.i-price .dis span {
  color: #0db35f;
  position: relative;
  padding-left: 0.55rem;
}

.price-panle .price-list-panle.new-list dd a.l-detail li.i-qprice {
  color: #ff6a27;
}

.price-panle .price-list-panle.new-list dd a.l-detail li.i-qprice .detail-text {
  font-size: 0.5rem;
  color: #576b95;
}

.price-panle .price-list-panle.new-list dd a.r-tel {
  width: 16%;
  position: relative;
}
.price-panle .price-list-panle dd:last-child:before {
  display: none;
}

.price-panle .price-list-panle .face-box {
  position: relative;
  text-align: center;
}

.price-panle .price-list-panle .face-box img {
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  width: 1.6rem;
  height: 1.6rem;
}

.price-panle .price-list-panle .face-box .realname {
  position: relative;
  display: block;
  font-size: 0.6rem;
  /*padding-top: .1rem;*/
  overflow: hidden;
  /*height: 1.2em*/
}

.price-panle .price-list-panle .face-box.vip img {
  border-color: #ffcf71;
}

#netPriceShow{
  position:absolute;
  width:180px;
  background-color: #f5f5f5;
  border:1px solid #ddd;
  z-index:999;
  margin-top:6px;
  right:0px;
}

#totalPriceShow{
   position:absolute;
    width:180px;
    background-color:#f5f5f5;
    border:1px solid #ddd;
    z-index:999;
    margin-top:6px;
    right:0px;
}

dt ul li{
  color:#333333!important;
}

h4{
    margin-bottom:0px!important;
}
 
</style>

